<template>
  <div class="login">
    <div class="title">
      <i class="iconfont icon-fa-angle-right" @click="go" :class="{'vs':isWeixin}"></i><span @click="isPwd=!isPwd">{{isPwd ? '验证码登录':'密码登录'}}</span>
    </div>
   <div class="content" @keyup.enter="submit">
     <h2>你好，</h2>
     <p>欢迎登录华晟天弘</p>
          <div class="input-item">
            <input type="tel" name="phone" v-model="user.phone" placeholder="请输入手机号"/>
          </div>
      <template v-if="isPwd">
          <div class="input-item">
            <input :type="pwdType" name="phone" v-model="user.password" placeholder="请输入登录密码"/>
            <i v-if="pwdType === 'password'" class="iconfont icon-yanjing_bi" @click="pwdType='text'"></i>
            <i  v-if="pwdType === 'text'" class="iconfont icon-yanjing-zheng" @click="pwdType='password'"></i>
          </div>
        </template>
      <template v-else>
       <div class="input-item">
         <input type="text" name="code" @input="isGetCode" v-model="user.code" placeholder="请输入验证码"/>
         <span v-if="!isShowTime" :class="{'es':user.phone.trim()}"  @click="getVCode">获取验证码</span>
         <span class="time" v-else>{{time}}s</span>
       </div>
     </template>
       <a href="javascript:void(0)">忘记密码</a>
       <button class="mybtn" :disabled="!isSubmit" @click.prevent="submit" :class="{'es': isSubmit}">登录</button>
   </div>
    <router-link tag="span" class="go" to="/register">没有账号？去注册</router-link>
  </div>
</template>

<script>
  import CONFIG from './../../config'
  import {isMobile,SetCookie} from "../../util";

  export default {
    name: "Login",
    data() {
      return {
        pwdType:'password',
        isPwd:true,
        user:{
          phone:'',
          password:'',
          loginType:1,
          code:'',
        },
        isShowTime:false,
        captcha1:{},
        interval:{},
        isRequest:false,
        time:120,
      }
    },
    mounted(){
      this.captcha1 = new TencentCaptcha(CONFIG.appId, this.handleVCode);
    },
    computed:{
      isSubmit(){
        if(this.isPwd){
          return this.user.phone.trim() && this.user.password.trim()
        }else {
          return this.user.phone.trim() && this.user.code.trim()
        }
      }
    },
    methods: {
      go(){
        this.$router.go(-1)
      },
      isGetCode() {
        if (!this.isShowTime) {
          this.user.code = '';
         this.$toast('请先获取验证码');
        }
      },
      submit(){
        if(!isMobile(this.user.phone)){
         this.$toast('手机号格式不正确');
          return;
        }
        if(this.isPwd){
          this.user.loginType=1
        }else {
          this.user.loginType=2
        }
        this.$indicator.open();
        this.$api.login(this.user).then((res)=>{
          this.$indicator.close();
          SetCookie('token_',res.data.token);
          localStorage.setItem('userType',res.data.user_type);
          localStorage.setItem('isVerified',res.data.is_real);
          this.$store.dispatch('initUserAction');
          this.$router.push('/homepage');
        }).catch((err)=>{
          this.$indicator.close();
          this.$msg(err,this.$toast);
        })
      },
      getVCode(){
        if(this.user.phone.trim()==='')return;
        if(!isMobile(this.user.phone)){
            this.$toast('手机号格式不正确');
        }else {
          this.captcha1.show()
        }
      },
      handleVCode(res){
        if(res.ret === 0){
          this.$api.sendMsg({phone:this.user.phone,ticket:res.ticket,randstr:res.randstr,template:'login'}).then((res)=>{
            this.interval = setInterval(()=>{
              this.time -= 1;
              if(this.time === 0){
                clearInterval(this.interval);
                this.isShowTime = false;
                this.time = 120;
              }
            },1000);
            this.isShowTime = true;
          }).catch((err)=>{
            this.$msg(err,this.$toast);
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
.login{
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  .title{
    height: 88px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span{
      font-size:30px;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    i{
      font-size: 30px;
      line-height: 30px;
      &.vs{
        visibility: hidden
      }
    }
  }
  .content{
    padding: 0 65px;
    >h2{
      font-size:72px;
      font-weight:500;
      color:rgba(0,0,0,1);
      line-height: 72px;
      margin: 66px 0 0 0;
    }
    >p{
      font-size:30px;
      font-weight:400;
      line-height: 30px;
      color:rgba(204,204,204,1);
      margin: 27px 0 94px 0;
    }
    .input-item{
      height: 100px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .iconfont{
        font-size: 40px;
        color: #333333;
      }
      input{
        font-size: 30px;
        line-height: 30px;
        color: #999999;
        text-align: left;
      }
      >span{
        font-size: 30px;
        line-height: 30px;
        color: #999999;
        &.es{
          color: #E71F18;
        }
        &.time{
          margin: 0 30px 0 0;
        }
      }
    }
    >a{
      float: right;
      font-size:30px;
      line-height: 30px;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin: 30px 0 90px 0;
    }
    .mybtn{
      width: 100%;
      height:88px;
      border-radius:6px;
      display: block;
      margin: 0 auto;
      font-size:36px;
      font-weight:400;
      color:rgba(255,255,255,1);
      &.es{
        background:rgba(231,31,24,1);
      }
    }
  }
  .go{
    font-size:24px;
    line-height: 24px;
    font-weight:400;
    width: 100%;
    text-align: center;
    color:rgba(153,153,153,1);
    display: block;
    position: absolute;
    bottom:90px;
    left: 0;
  }
}
</style>
